<!-- <template>
  <div class="box">
    <span>菜单管理</span>
    <div class="buttom">
      <el-button type="success" size="medium" @click="open">添加菜品</el-button>
    </div> -->
    <!-- 主体部分 -->
    <!-- <div class="subject" v-if="nodatas"> -->
      <!-- 表头 -->
      <!-- <div class="header">
        <span v-for="(item, index) in tablist" :key="index">{{ item }}</span>
      </div> -->
      <!-- 表格 -->
      <!-- <div class="table" v-for="(item, index) in tabcont" :key="index">
        <span>{{ item.time }}</span>
        <span>{{ item.category }}</span>
        <span>{{ item.name }}</span>
        <div> -->
          <!-- 照片 -->
          <!-- <el-image class="images" :src="item.image[0].url" fit="cover" :lazy="true"
            :preview-src-list="[item.image[0].url]">
          </el-image>
        </div>
        <span>{{ item.unitprice }}</span>
        <div> -->
          <!-- 是否上下架 -->
          <!-- <el-button class="smoll1" v-if="item.onsale" type="success" size="mini" @click="edIt(item)"
            :disabled="item.onsale ? false : true">编辑</el-button>
          <el-button class="smoll1" v-if="item.onsale" type="danger" size="mini"
            @click="shelf(item._id, index, item.cid)">下架</el-button>
          <el-button class="smoll1" v-else type="warning" size="mini" disabled>已下架</el-button>
        </div>
      </div>
    </div> -->
    <!-- 没有数据 -->
    <!-- <div class="non-vegetable" v-else>还没有菜品数据哦！</div> -->
    <!-- 分页 -->
  
    <!-- <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
  </div>
</template> -->

<script>
export default {
  data() {
    return {
      loading: true,
      nodatas: true,// 是否有菜品
      shelfload: -1, // 下架loading
      tablist: ["创建时间", "类目", "菜品名称", "菜品图片", "价格(元)", "操作"],
      tabcont: [],
      currentnum: 1, // 当前页数
      total: 0, // 总条数
      pagenum: 0, // 分页的页数
    };
  },
  methods: {
    // 分页
    currentchange(e) {
      this.pagenum = e - 1,
        this.obtaincate();
    },

    // 获取菜品
    async obtaincate() {
      try {
        let res = await new this.request(this.URL.m().obtaindishes + "?page=" + this.pagenum).GET();
        // 是否有菜品
        this.nodatas = res.data.data.total == 0 ? false : true;
        // 获取具体数据，循环遍历
        this.tabcont = res.data.data.result
        // 获取总页数
        this.total = res.data.data.Total
      } catch (error) {
        this.Message_Box.MessageError("服务器发生错误，请重新尝试");
      }
      this.loading = false
    },
    // 编辑修改
    edIt(item) {
      this.$router.push({ name: 'upload', params: { item } })
    },
    // 下架
    async shelf(_id, index, cid) {
      this.shelfload = index
      let obj = JSON.stringify({_id,cid})
      console.log(index);
      try {
        let res = await new this.request(this.URL.m().fromsale + '?' + obj).GET();
        this.$set(this.tabcont[index], 'onsale', false)
        // 成功
        this.Message_Box.MessageSuccess(res.data.msg);
      } catch (error) {
        this.Message_Box.MessageError("下架失败,请重新尝试");
      }
      this.shelfload = -1
    }
  },
  created() {
    this.obtaincate()
  }
};
</script>

<!-- <style lang="less" scoped>
// 主体盒子
.box {
  position: relative;
  padding: 0 9.6% 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #f6f8f9;
}

// 头部
.box span {
  padding-top: 10px;
  font-weight: 700;
  display: block;
  font-size: 18px;
}

.box .buttom {
  width: 1000px;
  height: 120px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.box .buttom button {
  width: 120px;
  height: 40px;
}

// 下部主体部分
.subject {
  width: 1000px;
  background-color: #ffffff;
}

.subject .header {
  width: 100%;
  height: 75px;
  line-height: 40px;
  padding: 0 65px;
  display: flex;
  justify-content: space-between;
}

.subject .header span {
  font-size: 18px;
  font-weight: 500;
}

.table {
  padding: 0 25px;
  height: 60px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  border-top: 1px solid #f0f0f0;
}

.table span {
  font-size: 14px;
  font-weight: 400;
}

.table span:nth-child(1) {
  width: 180px;
  text-align: center;
}

.table span:nth-child(2) {
  width: 110px;
  text-align: center;
}

.table span:nth-child(3) {
  width: 200px;
  text-align: center;
}

.table div:nth-child(4) {
  width: 150px;
  text-align: center;
}

.table span:nth-child(5) {
  width: 185px;
  text-align: center;
}

.table div:nth-child(6) {
  width: 130px;
  text-align: center;
}

.non-vegetable {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}

.images {
  width: 50px;
  height: 50px;
  border-radius: 3px;
}

.el-pagination {
  text-align: center;
  margin-top: 40px !important;
  white-space: nowrap;
  color: #303133;
  font-weight: 700;
} 
</style>
-->



<template>
  <div class="ordering" v-loading.fullscreen.lock="loading">
    <div class="heading">菜品管理</div>
    <div class="content-view">
      <div class="button-view">
        <router-link :to="{ name: 'upload' }">
          <el-button type="success" size="medium">添加菜品</el-button>
        </router-link>
      </div>
      <div v-if="nodatas">
        <!-- 表头 -->
        <div class="tab-list">
          <span v-for="(item, index) in tablist" :key="index">{{ item }}</span>
        </div>
        <!-- 表格 -->
        <div class="tab-table" v-for="(goods_item, index) in tabcont" :key="index">
          <div>{{ goods_item.time }}</div>
          <div>{{ goods_item.category }}</div>
          <div>{{ goods_item.name }}</div>
          <!-- 照片 -->
          <div>
            <el-image class="elimg" :src="goods_item.image[0].url" fit="cover" :lazy="true"
              :preview-src-list="[goods_item.image[0].url]">
            </el-image>
          </div>
          <div>{{ goods_item.unitprice }}</div>
          <!-- 是否上下架 -->
          <div>
            <!--disabled 是否禁用  -->
            <el-button size="small" @click="edIt(goods_item)" :disabled="goods_item.onsale ? false : true">编辑</el-button>
            <el-button v-if="goods_item.onsale" type="danger" size="small"
              @click="shelf(goods_item._id, index, goods_item.cid)" :loading="index == shelfload ? true : false"
              :disabled="index == shelfload ? true : false">下架</el-button>
            <el-button v-else type="warning" size="small" disabled>已下架</el-button>
          </div>
        </div>
        <!-- 分页 -->
          <!-- current-page 当前页数，支持 .sync 修饰符 -->
          <!-- layout 组件布局，子组件名用逗号分隔 -->
          <!-- hide-on-single-page 只有一页时是否隐藏	 -->
          <!-- background  是否为分页按钮添加背景色	 -->
          <!-- total 总条目数	 -->
          <!-- current-change:currentPage 改变时会触发	 -->
        <el-pagination background layout="prev, pager, next" :hide-on-single-page="false" :total="total"
          @current-change="currentchange">
        </el-pagination>
      </div>
      <!-- 没有数据 -->
      <div class="nodatas" v-if="!nodatas">还没有菜品数据</div>
    </div>
    <div style="height: 120px;"></div>
  </div>
</template>
<!-- 
<script>
export default{
	data() {
		return {
			loading: true,
			nodatas:true,
			shelfload:-1,//下架loading
			tablist: ['创建时间','类目','菜品名称','菜品图片','价格(元)','操作'],
			tabcont:[],
			currentnum:1,//当前页数
			total:0,//总条数
			pagenum:0,
		}
	},
	methods:{
		// 分页
		currentchange(e){
			// console.log(e)//0:第一页，1：第二页，2：第三页
			this.pagenum = e - 1
			this.obtaindishes()
		},
		// 获取菜品
		async obtaindishes(){
			try{
				let res = await new this.Request(this.Urls.m().obtaindishes + '?page=' + this.pagenum).modeget()
				this.nodatas = res.data.data.tatal == 0  ? false : true
				this.tabcont = res.data.data.result
				this.total = res.data.data.tatal
				this.loading = false
			}catch(e){
				this.loading = false
				new this.mytitle(this.$message,'error','服务器发生错误,请重试').funtitle()
			}
		},
		// 编辑修改
		edIt(item){
			this.$router.push({name:'upload',params:{item}});
		},
		// 下架
		async shelf(id,index,value){
			this.shelfload = index
			let obj = this.$qs.stringify({id,value})
			try{
				await new this.Request(this.Urls.m().fromsale + '?' + obj).modeget()
				this.$set(this.tabcont[index],'onsale',false)
				this.shelfload = -1
			}catch(e){
				this.shelfload = -1
				new this.mytitle(this.$message,'error','下架失败，重试').funtitle()
			}
		}
	},
	created() {
		this.obtaindishes()
	},
}
</script> -->

<style scoped="scoped">
@import url("@/assets/style/pubiss.css");

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #00be06;
  color: #fff;
}

/* 分页 */
.el-pagination {
  text-align: center;
  margin: 30px 0;
}
</style>

